<template>
	<view class="content">
		<!-- 遮罩 -->
		<view class="mark" v-if="isLandScape">
			<image src="../../static/tip-heng1.png" class="tip-heng"></image>
		</view>
		<view class="letter-box" v-else :style="{'height':keyongH+'px'}">
			<view class="lbg-1">
				<view class="lbg-1-box">
					<text class="letter-txt4">{{name}}</text>
				</view>
			</view>
			<view class="lbg-2"></view>
			<view class="lbg-3" @click="gotoqrcode"></view>
			<!-- <text class="letter-txt1">亲爱的{{name}}</text>
			<text class="letter-txt2">流体明胶10周年，感恩有你，一路同行！</text>
			<text class="letter-txt3">专家们的支持和建议，是流体明胶不断发展和创新的不竭动力！值此流体明胶上市10周年之际，请留下您对专家专属的感谢！</text> -->
			<!-- <view class="pic1" ></view>
			<view class="pic2"></view>
			<view class="pic3" @click="gotoqrcode"></view>
			<view class="pic4"></view>
			<view class="pic5"></view> -->
		</view>
	</view>
	
	<!-- :style="{'width':keyongW+'px','height':keyongW*501/750+'px'}" -->
</template>

<script>
	export default {
		data() {
			return {
				isLandScape:true,
				keyongH:'',
				keyongW:'',
				name:''
			}
		},
		onShow() {
			this.name = uni.getStorageSync('name')
			uni.getSystemInfo({
				success: (res) => {
					console.log(res.windowHeight)
					if (res.windowHeight < res.windowWidth) {
						this.isLandScape = true
						this.keyongH = res.windowHeight
						this.keyongW = res.windowWidth
					} else {
						this.isLandScape = false
						console.log('可使用窗口高度', res.windowHeight)
						this.keyongH = res.windowHeight
						this.keyongW = res.windowWidth
					}
				}
			})
			window.addEventListener("resize", (event) => {
				uni.getSystemInfo({
					success: (res) => {
						console.log(res.windowHeight)
						if (res.windowHeight < res.windowWidth) {
							this.isLandScape = true
							this.keyongH = res.windowHeight
							this.keyongW = res.windowWidth
						} else {
							this.isLandScape = false
							console.log('可使用窗口高度', res.windowHeight)
							this.keyongH = res.windowHeight
							this.keyongW = res.windowWidth
						}
					}
				})
			}, false);
		},
		methods: {
			gotoqrcode(){
				uni.redirectTo({
					url:'../qrcode/qrcode'
				})
			}
		}
	}
</script>

<style scoped>
	.content{
		height: auto;
		position: relative;
		width: 100%;
		height: 100%;
	}
.mark {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(0,0,0,1);
	}
	.tip-heng{
		width: 596rpx;
		height: 216rpx;
		z-index: 10;
	}
	.letter-box{
		display: flex;
		flex-direction: column;
		/* align-items: center; */
		width: 100%;
		height: 100%;
		background: url(../../static/letter/letterbg.jpg) no-repeat center top;
		background-size: 100% 100%;
	}
	.pic1{
		width: 750rpx;
		height: 501rpx;
		background: url(../../static/letter/letter-01_01.jpg) no-repeat center center;
		background-size: 100% auto;
	}
	.pic2{
		width: 750rpx;
		height: 668rpx;
		background: url(../../static/letter/letter-01_02.jpg) no-repeat center center;
		background-size: 100% auto;
	}
	.pic3{
		width: 750rpx;
		height: 135rpx;
		background: url(../../static/letter/letter-01_03.jpg) no-repeat center center;
		background-size: 100% auto;
	}
	.pic4{
		width: 750rpx;
		height: 127rpx;
		background: url(../../static/letter/letter-01_04.jpg) no-repeat center center;
		background-size: 100% auto;
	}
	.pic4{
		width: 750rpx;
		height: 193rpx;
		background: url(../../static/letter/letter-01_05.jpg) no-repeat center center;
		background-size: 100% auto;
	}
	.letter-txt1{
		top: 189rpx;
		/* left: 97rpx; */
		
		left: 50%;
		margin-left: -300rpx;
		position: absolute;
		font-size: 38rpx;
		font-weight: bold;
		letter-spacing: 3px;
		color: #717171;
		width: 600rpx;
	}
	.letter-txt2{
		top: 273rpx;
		left: 50%;
		margin-left: -300rpx;
		width: 600rpx;
		position: absolute;
		font-size: 28rpx;
		font-weight: bold;
		letter-spacing: 2px;
		color: #717171;
	}
	.letter-txt3{
		top: 356rpx;
		text-indent: 2em;
		left: 50%;
		margin-left: -300rpx;
		width: 600rpx;
		position: absolute;
		font-size: 28rpx;
		letter-spacing: 2px;
		line-height: 78rpx;
		color: #717171;
	}
	.letter-txt4{
		top: -2rpx;
		left: 118rpx;
		position: absolute;
		font-size: 38rpx;
		line-height: 38rpx;
		font-weight: bold;
		letter-spacing: 3px;
		color: #5f5f5f;
		width: 600rpx;
	}
	.lbg-1{
		width: 556rpx;
		height: 114rpx;
		position: absolute;
		left: 96rpx;
		top: 188rpx;
		background: url(../../static/letter/txt-1.png) no-repeat center center;
		background-size: 100% auto;
	}
	.lbg-2{
		width: 560rpx;
		height: 260rpx;
		position: absolute;
		left: 96rpx;
		top: 356rpx;
		background: url(../../static/letter/txt-2.png) no-repeat center center;
		background-size: 100% auto;
	}
	.lbg-3{
		width: 382rpx;
		height: 74rpx;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 838rpx;
		background: url(../../static/letter/dianjizhizuo.png) no-repeat center center;
		background-size: 100% auto;
	}
	.lbg-1-box{
		position: relative;
		width: 100%;
		height: 100%;
	}
</style>
